<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
    <head>
        <%@include file="common/head.jspf" %>
    </head>

    <body class="messages-page permission-page sb-l-o sb-r-c" data-menu="" data-list="#li_permission">

        <!-- 主体内容开始 -->
        <div id="main">

            <!--侧边导航栏-->
            <%@include file="common/sidebar.jspf" %>

            <!-- Start: Content-Wrapper -->
            <section id="content_wrapper">

                <!-- 顶部导航 -->
                <header id="topbar">
                    <div class="topbar-left">
                        <ol class="breadcrumb">
                            <li class="crumb-active">
                                <span>软擎科技</span>
                            </li>
                            <li class="crumb-icon">
                                <a href="dashboard"><span class="glyphicon glyphicon-home"></span></a>
                            </li>
                            <!-- 当前页 -->
                            <li class="crumb-trail">权限管理</li>
                        </ol>
                    </div>
                    <div class="topbar-right">
                        <!-- 登录信息 -->
                        <%@include file="common/session.jspf" %>
                    </div>
                </header>
                <!-- 顶部导航结束 -->

                <!-- 页面内容开始 -->
                <section id="content" class="table-layout">
                    <aside class="tray tray-left pn va-t tray250" data-tray-height="match">
                        <div class="p20">
                            <h4 class="mt5 mb20"> 权限管理 - <span class="fs14 fw400 text-muted"> Permissions </span></h4>
                            <ul class="list-unstyled list-spacing-10 mb10 pl5">
                                <li>
                                    <i class="fa fa-exclamation-circle text-alert fa-lg pr10"></i>
                                    添加/修改角色
                                </li>
                                <li>
                                    <i class="fa fa-exclamation-circle text-alert fa-lg pr10"></i>
                                    为系统员工分配角色
                                </li>
                            </ul>

                            <hr class="mb20 br-light">

                            <!-- menu links -->
                            <div id="roleList">
                                <h4 class="mt10 mb5"> 角色列表 </h4>
                                <div class="fs16 text-muted mt25 text-center" id="loading"><span class="fa fa-spin fa-spinner mr10"></span>加载中 ..</div>
                                <ul class="nav nav-messages p5 fs14" role="menu" id="roleContainer"></ul>
                                <hr class="mb20 br-light">
                                <button id="add_role" type="button" class="btn btn-system btn-block fw600"><i class="fa fa-plus mr5"></i>添加角色</button>
                            </div>

                            <div id="addRoleBox" class="shide"> 
                                <h4 class="mb15"> 添加角色 </h4>
                                <div class="admin-form mt20">
                                    <div class="section mb10">
                                        <label for="roleName" class="field">
                                            <input type="text" name="roleName" id="roleName" class="event-name gui-input br-light light" placeholder="角色名称">
                                        </label>
                                    </div>
                                    <button class="btn btn-primary btn-block" id="saveRoleBtn">保存角色</button>
                                    <button class="btn bg-light darker btn-block" id="cancelAdd">取消</button>
                                </div>
                            </div>
                        </div>
                    </aside>

                    <div class="tray tray-center pn va-t bg-light">
                        <div class="ph15">
                            <div class="row">
                                <div class="col-md-6 br-r pv10">
                                    <h3 class="text-center text-muted"><span class="glyphicons glyphicons-keys mr10"></span>角色权限</h3>
                                    <p class="text-center mb20"><code>该角色拥有的相关系统权限</code></p>
                                    <div class="form-horizontal no-selection pl20" method="get" id="permissions">
                                        <div class="fs16 text-muted mt25 text-center p-load-info"><span class="fa fa-spin fa-spinner mr10"></span>加载中 ..</div>
                                        <div class="row">
                                            <div class="col-md-6 leftCol"></div>
                                            <div class="col-md-6 rightCol">
                                            </div>
                                        </div>
                                        <div class="text-center">
                                            <button class="btn btn-primary ph40" id="saveRolePermission">保存权限</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h3 class="text-center text-muted"><span class="glyphicons glyphicons-group mr10"></span>员工列表</h3>
                                    <p class="text-center"><code>拥有该角色权限的员工列表</code></p>

                                    <div class="form-horizontal no-selection mt20 mh50" id="employees" style="min-height: 150px;">
                                        <!--<div class="fs16 text-muted mt25 text-center load-info"><span class="fa fa-spin fa-spinner mr10"></span>加载中 ..</div>-->
                                    </div>
                                    <div class="text-center">
                                        <button class="btn btn-primary ph40 shide" id="saveRoleMembers">保存角色员工列表</button>
                                    </div>

                                    <hr class="mb20 br-light">
                                    <p class="text-center mb30"><code>平台其他员工</code></p>
                                    <div class="form-horizontal no-selection" id="waiting">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <!-- 页面内容结束 -->
            </section>
        </div>
        <!-- 主体内容结束 -->


        <script type="text/x-tmpl-mustache" id="roleListTemplate">
            {{#roles}}
            <li data-id="{{id}}" class="roleItem">
            <a href="javascript:;" class="fw600 p10">
            <span class="fa fa-dot-circle-o mr5"></span> {{name}}
            <div class="btn-group pull-right">
            <button data-id="{{id}}" class="btn btn-default light btn-xs delete-role-link" role="button" title="删除"><i class="fa fa-trash text-muted"></i></button>
            </div>
            </a>
            </li>
            {{/roles}}
        </script>
        <script type="text/x-tmpl-mustache" id="permissionTemplate">
            {{#result}}
            <div class="checkbox-custom checkbox-primary mb5">
            <input type="checkbox" value="{{name}}" id="{{key}}" class="permission_checkbox">
            <label for="{{key}}">{{key}}{{{mode}}}</label>
            </div>
            {{/result}}
        </script>
        <script type="text/x-tmpl-mustache" id="employeeTemplate">
            {{#data}}
            <div class="checkbox-custom checkbox-primary mb5">
            <input type="checkbox" value="{{id}}" id="{{id}}" class="member_checkbox">
            <label for="{{id}}"><a href="employee/profile/{{id}}" class="text-muted-darker"  target="_blank">{{loginName}}（{{name}}）</a></label>
            </div>
            {{/data}}
        </script>
        <script type="text/x-tmpl-mustache" id="employeeListTemplate">
            {{#data}}
            <div class="empWrapper text-center">
            <div class="btn-group mb10">
            <button class="btn btn-default text-muted-darker light btn-sm w200" role="button">{{loginName}}（{{name}}）</button>
            <button data-id="{{id}}" class="btn btn-default btn-sm light remove-emp-link" role="button" ><i class="fa fa-trash text-muted"></i> 移除</button>
            </div>
            </div>
            {{/data}}
        </script>
        <script type="text/x-tmpl-mustache" id="employeeWaitingTemplate">
            {{#data}}
            <div class="empWrapper text-center">
            <div class="btn-group mb10">
                <button class="btn btn-default text-muted-darker light btn-sm w200" role="button">{{loginName}}（{{name}}）</button>
                <button data-id="{{id}}" class="btn btn-default btn-sm light remove-emp-link" role="button" ><i class="fa fa-plus text-muted"></i> 添加</button>
            </div>
            </div>
            {{/data}}
        </script>


        <!-- 公共函数 -->
        <%@include file="common/scripts.jspf" %>
        <script type="text/javascript" src="${rootPath}/js/pages/permissions.js"></script>
    </body>
</html>
